<template>
  <view class="content">
    <view class="tab-box">
      <u-tabs :list="tabnavList" @click="tabChange" :scrollable="false" lineColor="#4871C0" :current="activeIndex"
              lineWidth="70rpx" lineHeight="5rpx" :activeStyle="{
			    color: '#4871C0',
			    fontWeight: 'bold',
				fontSize:'28rpx',
			}" :inactiveStyle="{
			    color: '#999999',
				fontSize:'28rpx',
			}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:30%;padding-bottom:10rpx;"></u-tabs>
    </view>
    <!-- 我参与的 -->
    <view class="list" v-if="activeIndex == 0">
      <view class="list-item" v-for="(item,index) in dataList1" :key="index" @click="godetails(item.id)">
        <view class="item-img">
          <u--image :src=item.user.avatar shape="circle" width="44rpx"
                    height="44rpx">
          </u--image>

        </view>
        <view class="item-info">
          <view class="item-tile">
            <view class="title">{{item.title}}</view>
            <text v-if="item.status == 1" class="state state1">待进行</text>
            <text v-if="item.status == 8" class="state state2">进行中</text>
            <text v-if="item.status == 9" class="state state3">已结束</text>
            <text v-if="item.status == -1" class="state state3">已取消</text>
            <text v-if="item.status == 0" class="state state4">草稿</text>
            <text v-if="item.status == 2 || item.status == 3" class="state state5">待审核</text>
            <text v-if="item.status == 21 || item.status == 31" class="state state6">被驳回</text>
          </view>
          <view class="address">
            {{item.type_name}} I {{item.room.title}}
          </view>
          <view class="time">
            {{item.time}}
          </view>
          <!-- <view class="item-button" @tap.stop="gotouploadTopics()">
            <text>上传议题</text>
          </view>
          <view class="item-button" @tap.stop="gotoTopics()">
            <text>查看议题</text>
          </view>
          <view class="item-button" @tap.stop="">
            <text>修改议题</text>
          </view> -->
        </view>
      </view>
      <!-- 加载更多 -->
      <u-loadmore v-if="dataList1.length" :status="loadStatus" />

      <u-empty v-if="!dataList1.length && !isLoading" mode="data"
               icon="http://cdn.uviewui.com/uview/empty/car.png">
      </u-empty>
    </view>
    <!-- 我发布的 -->
    <view class="list" v-if="activeIndex == 1">
      <view class="list-item" v-for="(item,index) in dataList2" :key="index" @click="godetails(item.id)">
        <view class="item-img">
          <u--image :src=item.user.avatar shape="circle" width="44rpx"
                    height="44rpx">
          </u--image>
        </view>
        <view class="item-info">
          <view class="item-tile">
            <view class="title">{{item.title}}</view>
            <text v-if="item.status == 1" class="state state1">待进行</text>
            <text v-if="item.status == 8" class="state state2">进行中</text>
            <text v-if="item.status == 9" class="state state3">已结束</text>
            <text v-if="item.status == -1" class="state state3">已取消</text>
            <text v-if="item.status == 0" class="state state4">待上传</text>
            <text v-if="item.status == 2 || item.status == 3" class="state state5">待审核</text>
            <text v-if="item.status == 21 || item.status == 31" class="state state6">被驳回</text>
          </view>
          <view class="address">
            {{item.type_name}} I {{item.room.title}}
          </view>
          <view class="time">
            {{item.time}}
          </view>
          <!-- <view class="item-button" @tap.stop="gotouploadTopics()">
            <text>上传议题</text>
          </view>
          <view class="item-button" @tap.stop="gotoTopics()">
            <text>查看议题</text>
          </view>
          <view class="item-button" @tap.stop="">
            <text>修改议题</text>
          </view> -->
        </view>
      </view>
      <!-- 加载更多 -->
      <u-loadmore v-if="dataList2.length" :status="loadStatus" />

      <u-empty v-if="!dataList2.length && !isLoading" mode="data"
               icon="http://cdn.uviewui.com/uview/empty/car.png">
      </u-empty>
    </view>
    <!-- 我相关的 -->
    <view class="list" v-if="activeIndex == 2">
      <view class="list-item" v-for="(item,index) in dataList3" :key="index" @click="godetails(item.id)">
        <view class="item-img">
          <u--image :src=item.user.avatar shape="circle" width="44rpx"
                    height="44rpx">
          </u--image>
        </view>
        <view class="item-info">
          <view class="item-tile">
            <view class="title">{{item.title}}</view>
            <text v-if="item.status == 1" class="state state1">待进行</text>
            <text v-if="item.status == 8" class="state state2">进行中</text>
            <text v-if="item.status == 9" class="state state3">已结束</text>
            <text v-if="item.status == -1" class="state state3">已取消</text>
            <text v-if="item.status == 0" class="state state4">待上传</text>
            <text v-if="item.status == 2 || item.status == 3" class="state state5">待审核</text>
            <text v-if="item.status == 21 || item.status == 31" class="state state6">被驳回</text>
          </view>
          <view class="address">
            {{item.type_name}} I {{item.room.title}}
          </view>
          <view class="time">
            {{item.time}}
          </view>
          <view class="u-flex" v-if="item.role_type==5">
            <view v-if="item.is_topic==0" class="item-button" @tap.stop="gotouploadTopics(item.id)">
              <text>上传议题</text>
            </view>
            <view v-if="item.is_topic==1" class="item-button" @tap.stop="gotoTopics(item.id)">
              <text>查看议题</text>
            </view>
          </view>
          <view class="u-flex">
            <view v-if="item.type==3" class="item-button" @tap.stop="gotoPlan(item.id)">
              <text>部门工作计划</text>
            </view>
            <!-- <view v-if="item.is_topic==1" class="item-button" @tap.stop="gotoTopics(item.id)">
              <text>查看议题</text>
            </view> -->
          </view>
          <!-- <view class="item-button" @tap.stop="">
            <text>修改议题</text>
          </view> -->
        </view>
      </view>
      <!-- 加载更多 -->
      <u-loadmore v-if="dataList3.length" :status="loadStatus" />

      <u-empty v-if="!dataList3.length && !isLoading" mode="data"
               icon="http://cdn.uviewui.com/uview/empty/car.png">
      </u-empty>
    </view>

    <myTabBar :list='tabList' :currentIndex="2"></myTabBar>
  </view>
</template>

<script>
import myTabBar from '../../../component/customTabBar/customTabBar.vue'
import {
  getpartakeMeet,
  getreleaseMeet,
  getrelevantMeet
} from '@/api/meetApi.js'
export default {
  components:{
    myTabBar
  },
  data() {
    return {
      tabList:[
        {title:"代办",url:"/pages/tabbar/tabbar-3/daiban",icon:"list-dot"},
        {title:"会议室",url:"/pages/tabbar/tabbar-3/huiyishi",icon:"home"},
        {title:"我的会议",url:"/pages/tabbar/tabbar-3/myhuiyi",icon:"account"}
      ],
      tabnavList: [{
        name: '我参会的',
      }, {
        name: '我发布的',
      }, {
        name: '我相关的'
      }],
      activeIndex: 0,
      page: 1,
      limit: 12,
      lastPage: 0,
      dataList1: [],
      dataList2: [],
      dataList3: [],
      loadStatus: ''
    }
  },
  onLoad() {},
  onShow() {
    this.dataList1 = []
    console.log("===========activeIndex",uni.getStorageSync('tab_cur_index'));
    this.activeIndex = uni.getStorageSync('tab_cur_index');
    this.page = 1;
    if (this.activeIndex == 0) {
      this.dataList1 = []
      this.getDataList1()
    } else if (this.activeIndex == 1) {
      this.dataList2 = []
      this.getDataList2()
    } else {
      this.dataList3 = []
      this.getDataList3()
    }
  },
  onReachBottom: function() {
    if (this.page < this.lastPage) {
      this.page += 1;
      if (this.activeIndex == 0) {
        this.getDataList1()
      } else if (this.activeIndex == 1) {
        this.getDataList2()
      } else {
        this.getDataList3()
      }
    }
  },
  methods: {
    tabChange(item) {
      console.log('item', item);
      this.activeIndex = item.index;
      uni.setStorageSync('tab_cur_index',this.activeIndex);
      this.page = 1;
      this.lastPage = 0;
      this.loadStatus = "";
      if (this.activeIndex == 0) {
        this.dataList1 = []
        this.getDataList1()
      } else if (this.activeIndex == 1) {
        this.dataList2 = []
        this.getDataList2()
      } else {
        this.dataList3 = []
        this.getDataList3()
      }
    },
    changTiem(index) {
      this.activeNum = index;
    },
    // 我参与的列表
    getDataList1() {
      this.loadStatus = 'loading';
      this.isLoading = true;
      let params = {
        page: this.page,
		meet_type:1,
        limit: this.limit
      };
      getpartakeMeet(params).then(res => {
        this.isLoading = false;
        uni.stopPullDownRefresh();
        console.log(res)
        this.lastPage = res.data.last_page
        this.loadStatus = this.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
        this.dataList1 = [...this.dataList1, ...res.data.data]
      })
    },
    // 我发布的列表
    getDataList2() {
      this.loadStatus = 'loading';
      this.isLoading = true;
      let params = {
        page: this.page,
		meet_type:1,
        limit: this.limit
      };
      getreleaseMeet(params).then(res => {
        this.isLoading = false;
        uni.stopPullDownRefresh();
        console.log(res)
        this.lastPage = res.data.last_page
        this.loadStatus = this.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
        this.dataList2 = [...this.dataList2, ...res.data.data]
      })
    },
    // 我相关的列表
    getDataList3() {
      this.loadStatus = 'loading';
      this.isLoading = true;
      let params = {
        page: this.page,
		meet_type:1,
        limit: this.limit
      };
      getrelevantMeet(params).then(res => {
        this.isLoading = false;
        uni.stopPullDownRefresh();
        console.log(res)
        this.lastPage = res.data.last_page
        this.loadStatus = this.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
        this.dataList3 = [...this.dataList3, ...res.data.data]
      })
    },

    godetails(id) {
      uni.navigateTo({
        url: '/pages/tabbar-1-detial/meetingDetails/meetingDetails?id=' + id
      });
    },

    // 上传议题
    gotouploadTopics(id) {
      uni.navigateTo({
        url: '/pages/tabbar-1-detial/uploadTopics/uploadTopics?id=' + id
      });
    },
    // 议题详情
    gotoTopics(id) {
      uni.navigateTo({
        url: '/pages/tabbar-1-detial/topics/topics?id=' + id
      });
    },
    // 议题详情
    gotoPlan(id) {
      uni.navigateTo({
        url: '/pages/feedback/feedback?meet_id=' + id
      });
    },
  }
};
</script>

<style>
.content {
  background-color: #F8F8F8;
  min-height: 100vh;
}

.u-flex {
  display: flex;
  margin-top: 10rpx;
}

.u-flex .item-button:first-child {
  margin-left: auto;
  margin-right: 20rpx;

}

.tab-box {
  padding: 20rpx 0;
  background-color: #fff;
  border-bottom: 6rpx solid #F8F8F8;
}

.time-box {
  padding: 28rpx 30rpx;
  display: flex;
  align-items: center;
  font-size: 24rpx;
  font-weight: 500;
  background: #fff;
}

.serach {
  margin-left: auto;
  width: 32rpx;
  height: 32rpx;
}

.tiem-tiem {
  padding: 14rpx 26rpx;
  background: #F3F3F3;
  color: #999999;
  border-radius: 162px 162px 162px 162px;
  opacity: 1;
  margin-right: 28rpx;
}

.active {
  opacity: 1;
  background-color: #fff;
  border: 1px solid #4871C0;
  color: #4871C0;
}

.list {
  padding: 20rpx 24rpx;
}

.list-item {
  padding: 30rpx 24rpx 30rpx 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: flex-start;
}

.item-info {
  margin-left: 10rpx;
  width: 93%;
}

.item-tile {
  display: flex;
  justify-content: space-between;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  width: 78%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* border: 1px solid red; */
}

.title1 {
  width: 100%;
}

.state {
  font-size: 24rpx;
  font-weight: 500;
  padding: 10rpx 12rpx;
}

.state1 {
  color: #8B48C0;
  background: #F8EEFF;
  border-radius: 8rpx;
  opacity: 1;
}

.state2 {
  color: #4871C0;
  background: #EBF1FD;
  border-radius: 8rpx;
  opacity: 1;
}

.state3 {
  color: #999999;
  background: #F5F2F5;
  border-radius: 8rpx;
  opacity: 1;
}

.state4 {
  color: #26B167;
  background: #F2FFF8;
  border-radius: 8rpx;
  opacity: 1;
}

.state5 {
  color: #FA6161;
  background: #FFF0F0;
  border-radius: 8rpx;
  opacity: 1;
}

.state6 {
  color: #FF7A00;
  background: #FFECDA;
  border-radius: 8rpx;
  opacity: 1;
}

.address {
  font-size: 24rpx;
  font-weight: 500;
  color: #666666;
  margin-top: 10rpx;
}

.time {
  font-size: 24rpx;
  font-weight: 500;
  color: #666666;
  margin-top: 10rpx;
}

.item-button {
  text-align: right;
  margin-top: 10rpx;
}

.item-button text {
  text-align: center;
  display: inline-block;
  font-size: 28rpx;
  font-weight: 500;
  color: #FFFFFF;
  width: 186rpx;
  height: 64rpx;
  line-height: 64rpx;
  background: #4871C0;
  border-radius: 16rpx;
  opacity: 1;
}

.item-button {
  text-align: right;
  margin-top: 10rpx;
}

.item-button text {
  text-align: center;
  display: inline-block;
  font-size: 28rpx;
  font-weight: 500;
  color: #4871C0;
  width: 186rpx;
  height: 64rpx;
  line-height: 64rpx;
  background: #F1F6FF;
  border-radius: 16rpx;
  opacity: 1;
}
</style>
